<template>
    <div class="product-detail-page">
        <!-- 产品详情 -->
        <div class="detail-section">
            <el-card>
                <div class="product-header">
                    <img :src="product?.image" class="detail-image" />
                    <div class="product-title">
                        <h1>{{ product?.name }}</h1>
                        <div class="product-features">
                            <el-tag
                                v-for="feature in product?.features"
                                :key="feature"
                                size="small"
                                class="feature-tag"
                            >
                                {{ feature }}
                            </el-tag>
                        </div>
                    </div>
                </div>

                <div class="detail-content">
                    <h2>产品描述</h2>
                    <p>{{ product?.description }}</p>

                    <h2>产品特点</h2>
                    <ul>
                        <li v-for="feature in product?.features" :key="feature">{{ feature }}</li>
                    </ul>

                    <h2>技术参数</h2>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item
                            v-for="(spec, key) in product?.specifications"
                            :key="key"
                            :label="key"
                        >
                            {{ spec }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>
        </div>

        <!-- 推荐产品 -->
        <div class="recommendation-section">
            <h2>相关推荐</h2>
            <el-row :gutter="30">
                <el-col
                    :xs="24"
                    :sm="12"
                    :md="8"
                    v-for="item in recommendedProducts"
                    :key="item.id"
                >
                    <el-card
                        class="product-card"
                        :body-style="{ padding: '0px' }"
                        @click="goToProduct(item)"
                    >
                        <img :src="item.image" class="product-image" />
                        <div class="product-info">
                            <h3>{{ item.name }}</h3>
                            <p>{{ item.description }}</p>
                            <div class="product-features">
                                <el-tag
                                    v-for="feature in item.features"
                                    :key="feature"
                                    size="small"
                                    class="feature-tag"
                                >
                                    {{ feature }}
                                </el-tag>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const product = ref(null);
const recommendedProducts = ref([]);

// 模拟获取产品数据
const getProductData = () => {
    // 这里应该是从API获取数据
    const allProducts = [
        {
            id: 1,
            name: '智能管理系统',
            image: '/images/product1.svg',
            description: '提供全方位的企业智能化管理解决方案',
            features: ['数据分析', '流程优化', '智能决策'],
            specifications: {
                '适用范围': '中大型企业',
                '部署方式': '云端/本地部署',
                '技术架构': '微服务架构',
                '安全等级': '企业级安全防护'
            },
            category: '智能系统'
        },
        {
            id: 2,
            name: '数据分析平台',
            image: '/images/product2.svg',
            description: '强大的数据分析能力，助力企业决策',
            features: ['实时分析', '可视化报表', '预测分析'],
            specifications: {
                '数据处理能力': '每秒百万级',
                '存储方式': '分布式存储',
                '分析模型': '机器学习/深度学习',
                '接口支持': 'REST API'
            },
            category: '智能系统'
        },
        {
            id: 3,
            name: '云存储服务',
            image: '/images/product3.svg',
            description: '安全可靠的云存储解决方案',
            features: ['高可用性', '数据加密', '快速部署'],
            specifications: {
                '存储容量': '可扩展至PB级',
                '数据备份': '多地域备份',
                '访问方式': 'API/SDK',
                '安全认证': 'ISO27001认证'
            },
            category: '云服务'
        }
    ];

    const productId = parseInt(route.params.id as string);
    product.value = allProducts.find((p) => p.id === productId);

    // 获取同类别的推荐产品（排除当前产品）
    if (product.value) {
        recommendedProducts.value = allProducts.filter(
            (p) => p.category === product.value.category && p.id !== product.value.id
        );
    }
};

const goToProduct = (product) => {
    router.push(`/products/${product.id}`);
};

onMounted(() => {
    getProductData();
});
</script>

<style scoped>
.product-detail-page {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.detail-section {
    margin-bottom: 60px;
}

.product-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.detail-image {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.product-title {
    flex: 1;
}

.product-title h1 {
    margin-bottom: 20px;
    color: #2c3e50;
}

.detail-content h2 {
    color: #2c3e50;
    margin: 30px 0 20px;
}

.detail-content p,
.detail-content ul {
    color: #666;
    line-height: 1.6;
}

.detail-content ul {
    padding-left: 20px;
}

.recommendation-section {
    margin-top: 60px;
}

.recommendation-section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

.product-card {
    margin-bottom: 30px;
    cursor: pointer;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

.product-info p {
    color: #666;
    margin-bottom: 15px;
}

.product-features {
    margin: 15px 0;
}

.feature-tag {
    margin-right: 8px;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .product-header {
        flex-direction: column;
    }

    .detail-image {
        width: 100%;
        height: auto;
    }
}
</style>
